<script setup>
//创建动态的路由的对象
import {useRouter} from "vue-router";
import {ref} from "vue";

let router = useRouter()
//动态路由路径传参的方法
let showDetail2=(id,language)=>{
  //uri键值对参数，需要使用到query
  //router.push(`/showDetail2?id=${id}&/language=${language}`)
  router.push({path:'/showDetail2',query:{id:id,language:language}});
}

</script>

<template>
  <div>
    <h1>App的页面</h1>
    <hr>
    <!--路径的参数-->
<!--    <router-link to="/showDetail/1/JAVA">showDetail路径传参显示JAVA</router-link>-->
<!--    <button @click="showDetail(2,'PHP')">showDetail动态路由路径传参显示JAVA</button>-->

    <!--键值对参数-->
    <router-link to="/showDetail2?id=1&language=java">showDetail键值对传参显示JAVA</router-link>
    <router-link v-bind:to="{path:'/showDetail2',query:{id:1,language:'java'}}">showDetail键值对传参显示JAVA</router-link>
    <button @click="showDetail2(3,'Python')">showDetail动态路由键值对传参显示JAVA</button>
    <hr>
    showDetail2的视图显示:
    <router-view></router-view>


  </div>

</template>

<style scoped>

</style>
